<template>
  <div style="background-color: #f4fafe; overflow: hidden">
    <div class="main_header">
      <span></span><span>{{ testid.taskName }}</span>
      <div
        style="margin-right: 1.25rem; height: 30px; cursor: pointer"
        @click="submitJob()"
      >
        提交
      </div>
    </div>
    <div class="main">
      <div class="topic">
        <div class="topic_main">
          <div>题目</div>
          <div>共{{ questions.length }}题</div>
        </div>

        <div class="question" v-for="(item, idx) in questions" :key="idx">
          <p>{{ `${idx + 1}.${item.question.content}` }}</p>
          <div>
            <el-radio-group v-model="item.userAnswer" v-if="item.question.topicId == 1">
              <el-radio
                :label="''+Ite.id"
                v-for="(Ite, index) in item.question.optionsList"
                :key="index"
                >{{ letter[index] }}.{{ Ite.content }}</el-radio>
            </el-radio-group>
            <!-- <el-checkbox-group  style="display: flex;flex-direction: column;" v-if="item.question.topicId==2">
					    <el-checkbox :label="Ite.id"   v-for="(Ite,index) in item.question.optionsList" style="margin-top: 1.25rem;" >{{Ite.id}}.{{ Ite.content }}</el-checkbox>
					 </el-checkbox-group> -->
          </div>
          <ul style="background-color: #f9f9f9">
            <li style="display: flex; justify-content: space-between">
              <div>
                结果：<span :class="item.result ? 'yes' : 'no'">{{
                  item.result ? "正确" : "错误"
                }}</span>
              </div>
            </li>
            <!-- <li>标答:{{ item.question.answer }}</li> -->
            <!-- <li>我的答案:{{ item.userAnswer }}</li> -->
            <!-- <li>得分：{{ item.question.score }}</li> -->
            <li>
              难度：<el-rate
                v-model="item.question.difficulty"
                :max="5"
                :texts="texts"
                show-text
                disabled="disabled"
              >
              </el-rate>
            </li>
            <!-- <li>解析：{{item.question.parsing }}</li> -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { TestManager } from "../../../../request/test.js";
import marked from "marked";
export default {
  data() {
    return {
      question: [],
      textname: "",
      questions: [],
      testid: this.$route.params.testid,
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
      exam: [
        {
          value: "正确",
          id: 1,
        },
        {
          value: "错误",
          id: 0,
        },
      ],
      TestRecords: [],
    };
  },
  methods: {
    md(content) {
      return marked(content);
    },
    getQuestionnaireTest() {
      console.log(this.$route.params.testid);
      var parmas = {
        id: this.testid.testPaperId,
      };
      TestManager.getQuestionnaireTest(this.qs.stringify(parmas)).then((e) => {
        console.log(e);
        this.question = e.data.data;
        this.textname = this.question.testPaper.name;
        this.questions = e.data.data.questions.map((q) => {
          return {
            ...q,
            userAnswer: Number(q.userAnswer),
            answerList: [],
          };
        });
        console.log(this.questions);
      });
    },
    submitJob() {
      var singleList = [];
      var multipleList = [];
      var judgeList = [];
      var fillsList = [];
      var shortAnswer = [];
      let data = [];
      for (let i = 0; i < this.questions.length; i++) {
        // alert(this.danxuanti[i].id);
        if (this.questions[i].topicId !== 2) {
          singleList.push({
            questionId: this.questions[i].id,
            questionAnswer: this.questions[i].answer,
          });
        } else if (this.questions[i].topicId === 2) {
          multipleList.push({
            questionId: this.questions[i].id,
            questionAnswer: this.questions[i].answerList.join(","),
          });
        }
      }
      data.push(...singleList);
      data.push(...multipleList);
      data.push(...judgeList);
      data.push(...fillsList);
      data.push(...shortAnswer);
      TestManager.studentSubmittask(data, 480, this.testid.id).then((res) => {
        console.log(res);
        this.$router.push("/workstu");
      });
    },
    getTestRecordsInfo() {
      var parmas = {
        id: this.testid.testRecordId,
      };
      TestManager.getTestRecordsInfo(this.qs.stringify(parmas)).then((e) => {
        console.log(e.data.data);
        this.questions = e.data.data.questions;
        this.TestRecords = e.data.data.testRecord;
      });
    },
  },
  created() {
    // this.getQuestionnaireTest();
    console.log('------------------')
    console.log(this.$route.params);
    this.getTestRecordsInfo();
  },
};
</script>

<style scoped="scoped">
.main_header {
  text-align: center;
  background-color: #03d3bd;
  height: 2.875rem;
  line-height: 2.875rem;
  color: white;
  display: flex;
  justify-content: space-between;
  /* 	position: fixed;
		top: 0; */
  width: 100%;
}

.main {
  background-color: #ffffff;
  min-height: 100vh;
  margin-top: 2rem;
  width: 80%;
  margin-left: 10%;
  border-radius: 0.3125rem;
}

.topic_main {
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
}

.topic {
  margin-top: 3.125rem;
  height: 80%;
  background-color: #fff;
}

.topic .question {
  flex: 5;
  display: flex;
  flex-direction: column;
  padding: 50px;
  border-bottom: 1px solid #dfdfdf;
}

.topic .question .el-radio-group {
  display: flex;
  flex-direction: column;
}

.el-radio-group .el-radio {
  height: 40px;
  line-height: 40px;
}

.question li {
  list-style: none;
  display: block;
  height: 40px;
  margin-left: 1.875rem;
  display: flex;
  align-items: center;
}

.question span {
  display: inline-block;
  height: 20px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #fdf6ec;
}

.question .yes {
  background: #f0f9eb;
  color: #97d3bf;
}

.question .no {
  background-color: #fdf6ec;
  color: #e7ac95;
}

.el-radio {
  display: flex;
  margin-top: 1.875rem;
}
</style>
